<template>
    <view class="container">

        <view class="top">
            <image class="prev-icon" src="../../static/images/room/prev.png" mode="aspectFit" @click="prev"></image>
            <view class="myroom">我的模式</view>
            <view class="plus-icon-container">
                <image class="plus-icon" src="../../static/images/room/more.png" mode="aspectFit"></image>
            </view>
        </view>

        <view class="mode-card">
			<image :src="'../../static/images/mode/' + mode.modePic+ '.png'" class="pic">
            <!-- <image class="pic" :src="getModeIcon(mode.modePic)"></image> -->
            <view class="n-card">
                <view class="name">{{mode.modeName}}</view>
                <view class="mode_mode">本模式在 {{mode.day}} {{mode.begintime}}</view>
                <view v-for="(device, idx) in filteredDevices" :key="idx" class="mode_mode">
                    <view class="mode_mode1">
						{{ device.roomName }} 的
                        {{ device.deviceName }} 将会
                        <span v-if="device.deviceStatus === 'true'"> 打开</span>
                        <span v-else-if="device.deviceStatus === 'false'"> 关闭</span>
                        <span v-else>自动</span>
                    </view>
                    
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { getV } from '@/api/view/device_room.js';
    import { listSpecificmode } from '@/api/specificmode/specificmode.js';
    import { listDevice } from '@/api/device/device.js';

    export default {
        data() {
            return {
                mode: null,
                specificmodeList: [],
                deviceList: [],
                filteredDevices: [],
                roomDetails: {},
            };
        },
        methods: {
            prev() {
                uni.navigateBack();
            },
            getDeviceList() {
                listDevice().then(res => {
                    this.deviceList = res.rows;
                }).catch(error => {
                    console.error('Error fetching device:', error);
                });
            },
            getVList(deviceId, deviceStatus) {
                getV(deviceId).then(response => {
                    console.log("roomDetails", response.data);
                    this.filteredDevices.push({
                        deviceName: response.data.deviceName,
                        roomName: response.data.roomName,
                        deviceStatus: deviceStatus,
                    });
                    console.log("filteredDevices", this.filteredDevices);
                }).catch(error => {
                    console.error('Error fetching room details:', error);
                });
            },
            getSpecificmode() {
                listSpecificmode().then(res => {
                    this.specificmodeList = res.rows;
                    console.log("specificmodeList:", this.specificmodeList, this.modeId);
                    this.specificmodeList.forEach(sm => {
                        if (sm.modeId === this.modeId) {
                            console.log('sm.modeId equals this.modeId:', sm.deviceId);
                            this.getVList(sm.deviceId, sm.deviceStatus);
                        }
                    });
                }).catch(error => {
                    console.error('Error fetching specific modes:', error);
                });
            },
            getModeIcon(modePic) {
                switch (modePic) {
                    case 'o1':
                        return '../../static/images/mode/o1.png';
                    case 'o2':
                        return '../../static/images/mode/o2.png';
                    case 'o3':
                        return '../../static/images/mode/o3.png';
                    case 'o4':
                        return '../../static/images/mode/o4.png';
                    default:
                        return '';
                }
            },
        },
        onLoad(options) {
            this.modeId = Number(options.modeId);
            console.log("this.modeId", this.modeId);
            this.mode = JSON.parse(decodeURIComponent(options.mode));
        },
        onShow() {
            this.getSpecificmode();
            this.getDeviceList();
        }
    };
</script>

<style scoped>
	page {
		background-color: #f9f9f9;
	}

	.container {
		padding: 20px;

	}

	.mode-detail {
		background-color: #f8f8f8;
		padding: 10px;
		border-radius: 10px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	}

	.mode-detail text {
		display: block;
		margin-bottom: 10px;
		font-size: 18px;
		color: #333;
	}

	.top {
		display: flex;
		align-items: center;
		height: 52px;
		background-color: white;
		padding: 4px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		border-bottom: 1.5px solid #f0f0f0;
	}

	.prev-icon {
		flex: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;

		padding: 3px;
	}

	.myroom {
		flex: 7;
		font-size: 18px;
		color: #4e6490;
		font-weight: bold;
		text-align: center;
	}

	.plus-icon-container {
		position: relative;
	}

	.plus-icon {
		width: 30px;
		height: 40px;
		object-fit: contain;
		margin-right: 10px;
	}

	.mode-card {
		padding: 280rpx 20rpx 19rpx 19rpx; //上右下左
		text-align: center;
	}

	.n-card {
		margin-top: 50px;
		height: 520rpx;
		background-color: #d2dbea;
		border-radius: 90rpx;
		/* 圆角 */
	}

	.name {
		padding-top: 22px;
		font-size: 33rpx;
		color: #4e6490;
		font-weight: bold;
	}

	.mode_mode {
		padding-top: 22px;
		font-size: 33rpx;
		color: #4e6490;
		font-weight: bold;
	}
	.mode_mode1 {
		padding-top: 10rpx;
		font-size: 33rpx;
		color: #4e6490;
		font-weight: bold;
	}
</style>